在這個人人手裏一隻手機，包包一個 ipad 的年代。
multi device website 已經是很多網站的基本需求。

實現 multi device website 方法現在普遍有兩種。

1. RWD (Responsive web design)，響應式網站
2. 手機跟電腦有各自專屬網站。確保使用者的體驗是最符合裝置的，相對的開發成本比較高。

今天主要針對 RWD 的部分在講，如何同時支援手機跟電腦。
介紹 AngularJS website 如何偵測到 Touch 等觸控裝置的事件，然後又不影響原本的 click 事件。

這是我最近才學習的內容，有任何問題跟建議，歡迎各位大大指教。

Touch

當使用者手指敲擊手機螢幕時，瀏覽器會等大概 300 毫秒的時間確保使用者是不是想要 double-tapping。
等過了該檢查時間後，瀏覽器才會發送 click 事件。
由於每個 click 事件都需要等 300 毫秒後會執行 click 事件，網站整體的即時性跟使用者體驗就會下滑。

有遲疑 300 ms 的範例：（要用觸控裝置重現）
http://plnkr.co/edit/CQwz7Y2ovbUqb4HTrF1M

解決辦法：
1. 使用 ng-touch

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"]]>

ng-touch 就是幫我們把每個綁 ng-click 的元素，改變成偵測 touchstart 跟 touchend，手機瀏覽器就不會有 300 毫秒的時差。
所以綁 ng-click 的元素會直接等於 ng-touch，然後在手機上跑的順暢。

可是，目前在 ng-touch 有個 issue 是在 safari iOS 7 上會有呼叫兩次事件的問題。
個人覺得是蠻嚴重的問題，所以想要使用 ng-touch 這解法可以再想想。（個人意見）
（附上在 StackOverFlow 的 coma 提供的解法）

2. fastclick
假如只是為了解決 ng-click 會延遲 300 毫秒的問題。
我看到網路上有不少人推薦 fastclick。 ( angular-mobile-ui framework 也是用 fastclick)
在 AngualrJS module 引入 fastclick 方法是，(參考 Aslam Hadi 方法)

<script src="lib/fastclick.min.js"></script>

angular.module('myApp', []).
  run(function() {
    FastClick.attach(document.body);
  });

完成範例(無遲疑 300ms)：http://plnkr.co/edit/Lo4xXy6rWU96mtNlavoH

3.hammer.js
angular-gestures, Inoic 等 framework 都是使用 hammer.js 去處理 touch, swipe 等觸控裝置需要的事件。
基本上 hammer.js 非常強大也很好用。
StackOverFlow: AngularJS with hammer.js

可是個人覺得比較像是要專門寫手機網站才需要那麼多手勢的事件。
平常的 RWD 的支援只要到 Touch 跟 Drag 就很夠用了。

Drag

Drag 事件的檢測方法是

1. 偵測 touchstart 開始
2. touchmove 物件偵測移動的位置
3. 偵測 touchend , 結束，計算現在物件跑到的位置
   （以上可換成 mousedown , mousemove, mouseup for 電腦）

概念挺簡單的，可是實做起來其實蠻複雜的。
因為還要計算物件移動的點在哪裡，會不會影響到其他物件，有些還有要做動畫效果。

網路上找到一些別人寫好的 plugin 可以參考一下～
ng-sortable by a5hik
angular-dragdrop by coded0rmer
ngDraggable by fatlinesofcode （depend on jQuery）

————

我的第一個 AngularJS 專案是寫只給手機用的 web app。
是用 cordova (phonegap) + Inoic 完成的。
(個人覺得原生的 cordova 就蠻容易上手了 ，不需要用 inoic 的 ngCordova module。)
假如只寫 mobile web app ，建議可以先看 ng-newsletter angular on mobile 。
解說蠻完整的 ～

參考網站：
Ionic 處理 300ms delay 方法